<template>
  <div>
    <div class="chartBox">
      <el-row>
        <el-col :span="24" style="padding-left:10px;">
          <div class="chart" v-loading="echartsLoading">
            <div class="flex">
              <h3>
                <label>&nbsp;</label>各门店消费走势</h3>
              <el-form :inline="true" :model="dataTime"  label-width="110px" class="formBox">

                <el-form-item label="选择日期" prop="name">
                  <el-date-picker @change="echartsTime" :start-placeholder="startTime" :end-placeholder="endTime" v-model="dataTime.data" unlink-panels value-format="yyyy-MM-dd" type="daterange" range-separator="至">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="secondRow_formItem">
                  <el-button type="primary" @click="submitForm()">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div ref="echarts_1" :style="{ height: '302px' }"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="chartBox">
      <el-row>
        <el-col :span="24" style="padding-left:10px;">
          <div class="chart" v-loading="echartsLoading1">
            <div class="flex">
              <h3>
                <label>&nbsp;</label>会员在各门店消费走势</h3>
              <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="formBox">
                <el-form-item label="会员账户" prop="count">
                  <el-input placeholder="请输入会员账户" v-model="ruleForm.count"></el-input>
                </el-form-item>
                <el-form-item label="选择日期" prop="name">
                  <el-date-picker unlink-panels v-model="ruleForm.data" @change="echartsTime1" value-format="yyyy-MM-dd" type="daterange" range-separator="至" :start-placeholder="startTime1" :end-placeholder="endTime1">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="secondRow_formItem">
                  <el-button type="primary" @click="submitForm1('ruleForm')">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="nodata" v-show="no_date">
              <span>暂无数据</span>
            </div>
            <div ref="echarts_2" :style="{ height: '302px' }"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDateEnterStatistics } from "@/api/user";
export default {
  data() {
      var checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机格式有误"));
      } else {
        callback();
      }
    };
    return {
      startTime: "",
      no_date:true,
      endTime: "",
      startTime1: "",
      echartsLoading: false,
      endTime1: "",
      echartsLoading1: false,
      ruleForm: {
        data: "",
        count: ""
      },
      rules: {
        count: [
          {
            validator: checkPhone,
            trigger: "blur"
          }
        ]
      },
      dataTime: {
        data: ""
      }
    };
  },

  methods: {
    submitForm(formName) {
      this.getDateEnterStatistics();
    },
    submitForm1(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getDateEnterStatistics1();
        } else {
          return false;
        }
      });
    },
    //会员在各部门每天的入账情况
    getDateEnterStatistics1() {
      let self = this;
      this.echartsLoading1 = true;
      getDateEnterStatistics({
        startTime: this.startTime1,
        endTime: this.endTime1,
        memberId: this.ruleForm.count
      }).then(res => {
        if (res.code == 200) {
          this.no_date = false;
          let datas = res.data.datas;
          let legend = [];
          for (var i = 0; i < datas.length; i++) {
            legend = legend.concat(datas[i].name);
          }
          self.$nextTick(() => {
            var echarts_2 = self.$refs.echarts_2;
            var myChart2 = self.$echarts.init(echarts_2);
            // 绘制图表
            myChart2.setOption({
              tooltip: {
                trigger: "axis"
              },
              legend: {
                data: legend
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: res.data.dates
              },

              dataZoom: {
                show: true
              },
              yAxis: {
                name: "人民币(元)",
                type: "value"
              },
              series: datas
            });
          });
          this.echartsLoading1 = false;
        } else {
          this.$message.error(res.msg);
          this.echartsLoading1 = false;
        }
      });
    },
    echartsTime(val) {
      this.startTime = val[0];
      this.endTime = val[1];
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var year1 = date.getFullYear() - 1;
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.startTime = year1 + seperator1 + month + seperator1 + strDate;
      this.endTime = year + seperator1 + month + seperator1 + strDate;
      this.startTime1 = year1 + seperator1 + month + seperator1 + strDate;
      this.endTime1 = year + seperator1 + month + seperator1 + strDate;
    },
    echartsTime1(val) {
      this.startTime1 = val[0];
      this.endTime1 = val[1];
    },
    //只争朝夕:各部门每天的入账情况

    getDateEnterStatistics() {
      let self = this;
      this.echartsLoading = true;
      getDateEnterStatistics({
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code == 200) {
          let datas = res.data.datas;
          let legend = [];
          for (var i = 0; i < datas.length; i++) {
            legend = legend.concat(datas[i].name);
          }
          self.$nextTick(() => {
            var echarts_1 = self.$refs.echarts_1;
            var myChart1 = self.$echarts.init(echarts_1);
            // 绘制图表
            myChart1.setOption({
              tooltip: {
                trigger: "axis"
              },
              legend: {
                data: legend
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: res.data.dates
              },

              dataZoom: {
                show: true
              },
              yAxis: {
                name: "人民币(元)",
                type: "value"
              },
              series: datas
            });
          });
          this.echartsLoading = false;
        } else {
          this.echartsLoading = false;
          this.$message.error(res.msg);
        }
      });
    }
  },
  mounted() {
    var self = this;
    this.getNowFormatDate();
    this.getDateEnterStatistics();
    this.getDateEnterStatistics1()
  }
};
</script>

<style lang="scss" scoped>
.formBox {
  margin-top: 20px;
}
.chartBox {
  margin-top: 20px;

  padding: 0 10px;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      padding: 0;

      font-family: PingFangSC-Regular;

      font-size: 16px;

      color: #333333;

      margin: 10px 5px 15px;

      label {
        width: 6px;

        height: 15px;

        margin-right: 5px;

        background: #1ab394;

        display: inline-block;

        vertical-align: bottom;
      }
    }
  }

  .chart {
    background: #fff;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

    padding: 10px;
        .nodata{
      text-align: center;
  font-size: 19px;
  color: #999999;
  line-height: 25px;
  margin: 40px 0 20px 0;
  letter-spacing: 1px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
  }
}
</style>
